<template>
	<view>
		<map show-location class="map" :latitude="lat" :longitude="lng" :markers="markers">
			<cover-image src="../../../static/imgs/backicon.png" class="icon"></cover-image>
			<cover-image src="../../../static/imgs/order-grey.png" class="icon2"></cover-image>
		</map>

		<view class="container">
			<view class="tab-container">
				<view class="tab-item cur">
					<view>
						经济型
					</view>
					<view>
						58.30起
					</view>
				</view>
				<view class="tab-item cur">
					<view>
						舒适性
					</view>
					<view>
						58.30起
					</view>
				</view>
				<view class="tab-item">
					<view>
						豪华型
					</view>
					<view>
						58.30起
					</view>
				</view>
				<view class="tab-item">
					<view>
						商务型
					</view>
					<view>
						58.30起
					</view>
				</view>
			</view>
			<scroll-view scroll-y style="height: calc(100% - 370rpx);">
				<view class="car-list">
					<view class="title">
						<text>经济型</text>
						<view class="right">
							<text>全选</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
					<view class="car-item">
						<view class="left">
							<image src="https://zhengxin-pub.cdn.bcebos.com/financepic/603754a68b3001b3479ad02d0d27a7bf_fullsize.jpg"></image>
							<text>曹操专车</text>
						</view>

						<view class="right">
							<text>预估35.8元</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
					<view class="car-item">
						<view class="left">
							<image src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg"></image>
							<text>滴滴出行</text>
						</view>

						<view class="right">
							<text>预估35.8元</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
				</view>
				<view class="car-list">
					<view class="title">
						<text>舒适型</text>
						<view class="right">
							<text>全选</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
					<view class="car-item">
						<view class="left">
							<image src="https://zhengxin-pub.cdn.bcebos.com/financepic/603754a68b3001b3479ad02d0d27a7bf_fullsize.jpg"></image>
							<text>曹操专车</text>
						</view>

						<view class="right">
							<text>预估35.8元</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
					<view class="car-item">
						<view class="left">
							<image src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg"></image>
							<text>滴滴出行</text>
						</view>

						<view class="right">
							<text>预估35.8元</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
				</view>
				<view class="car-list">
					<view class="title">
						<text>豪华型</text>
						<view class="right">
							<text>全选</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
					<view class="car-item">
						<view class="left">
							<image src="https://zhengxin-pub.cdn.bcebos.com/financepic/603754a68b3001b3479ad02d0d27a7bf_fullsize.jpg"></image>
							<text>曹操专车</text>
						</view>

						<view class="right">
							<text>预估35.8元</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
					<view class="car-item">
						<view class="left">
							<image src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg"></image>
							<text>滴滴出行</text>
						</view>

						<view class="right">
							<text>预估35.8元</text>
							<u-checkbox active-color="#2D7AFE" shape="circle" v-model="check"></u-checkbox>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom">
				<view class="choose">
					<view class="item" @click="show = true" v-if="time[1]">
						<view>{{time[0]}}</view>
						<view>{{time[1]}}:{{time[2]}}</view>
					</view>
					<view class="item" @click="show = true" v-else>出发时间></view>
					<view class="item" @click="toPassenger" v-if="passenger.name">
						<view>{{passenger.name}}</view>
						<view style="font-size: 20rpx;color: #b3b3b3;">{{passenger.mobile}}</view>
					</view>
					<view class="item" @click="toPassenger" v-else>乘车人></view>
				</view>
				<view class="btn" @click="call">
					<text>立即呼叫</text>
					<text class="small">已选择8个</text>
				</view>
			</view>
		</view>

		<u-popup v-model="show" mode="bottom">
			<view class="time-container">
				<view class="top">
					<view class="title">请选择出发时间</view>
					<u-icon name="close" @click="show = false"></u-icon>
				</view>
				<u-picker v-model="show" mode="multiSelector" :range="range" rangeKey="name" @confirm="confirm" ref="picker"></u-picker>
				<view class="bottom" @click="btnClick">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import touchSlide from '@/components/touch-slide/touch-slide.vue'
	export default {
		data() {
			return {
				lat: 0,
				lng: 0,
				markers: [],
				check: false,
				show: false,
				range: [
					[{
						name: '今天'
					}, {
						name: '3.26 明天'
					}, {
						name: '3.27 后天'
					}, {
						name: '3.28 大后天'
					}]
				],
				time: [],
				passenger: {
					name: '小桌子',
					mobile: '13800138000'
				}
			};
		},
		comments: {
			touchSlide
		},
		onLoad() {
			const sys = uni.getSystemInfoSync()
			this.range.push(Array(24).fill({
				name: 1
			}).map((item, index) => {
				if (index <= 9) {
					index = '0' + index
				}
				return {
					name: index
				}
			}))
			this.range.push(Array(60).fill({
				name: 1
			}).map((item, index) => {
				if (index <= 9) {
					index = '0' + index
				}
				return {
					name: index
				}
			}))
		},
		methods: {
			confirm(e) {
				let index0 = e[0] || 0
				let index1 = e[1] || 0
				let index2 = e[2] || 0
				this.time = [this.range[0][index0].name, this.range[1][index1].name, this.range[2][index2].name]
			},
			btnClick() {
				this.$refs['picker'].getResult('confirm')
			},
			toPassenger() {
				uni.navigateTo({
					url: './passenger'
				})
			},
			call() {
				uni.navigateTo({
					url: './calling'
				})
			}
		}
	}
</script>

<style lang="scss">
	.map {
		width: 100%;
		height: 30vh;
		border: none;
		outline: none;
		margin: 0;
		padding: 0;

		.icon {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 20rpx;
			top: calc(var(--status-bar-height) + 20rpx);
		}

		.icon2 {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 20rpx;
			top: calc(var(--status-bar-height) + 20rpx);
		}
	}

	.container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 70vh;
		overflow: scroll;

		.tab-container {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-bottom: 10rpx solid #F2F2F7;
			flex-direction: row;
			padding: 30rpx 20rpx;

			.tab-item {
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-right: 20rpx;
				background: #F2F2F7;
				padding: 20rpx;

				&.cur {
					color: #3587F7;
					border: 2rpx solid #3587F7;
					background: #EFF4FD;
				}
			}
		}

		.car-list {
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bolder;
				color: #333333;
				padding: 30rpx;

				.right {
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						margin-right: 20rpx;
					}
				}
			}

			.car-item {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;

				.left {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}

		.bottom {
			position: absolute;
			background: #FFFFFF;
			width: 100%;
			display: flex;
			height: 200rpx;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			padding: 0 40rpx;
			left: 0;
			bottom: 0;

			.choose {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;


				.item {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					text-align: center;
				}
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 100%;
				height: 100rpx;
				background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
				color: #FFFFFF;
				border-radius: 20rpx;
				font-size: 32rpx;

				.small {
					font-size: 22rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.time-container {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		height: 500rpx;
		position: relative;

		/deep/ .u-drawer {
			position: relative;
			height: 200rpx !important;
			width: 100% !important;
			top: auto !important;
			right: auto !important;
			left: auto !important;
			bottom: auto !important;

			.u-mask {
				display: none;
			}

			.u-picker-header {
				display: none;
			}

			.u-drawer__scroll-view,
			.u-picker-body {
				height: 200rpx;
			}

		}


		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx;

			.title {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.bottom {
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
		}
	}
</style>
